<?php
/*
 * itinerary-new.php
 */
?>
<div id="itinerary-<?php echo $_POST['index'] ?>">
    <label>
        <span>Point de départ</span>
        <select class="start"></select>
    </label>&nbsp;
    <label>
        <span>Point d'arrivée</span>
        <select class="end"></select>
    </label>&nbsp;
    <label>
        <span>Type de trajet</span>
        <select class="type">
            <option value='0'>Avion</option>
            <option value='1'>Randonnée</option>
            <option value='2'>Bateau</option>
        </select>
    </label>
    <label>
        <span>Couleur</span>
        <input type="text" class="color" value="#FF0000">
    </label>
    <button class="btn btn-xs btn-primary btn-draw">Tracer le chemin</button>
</div>

<script type='text/javascript'>
    $(function() {
        // Couleur
        $('#itinerary-<?php echo $_POST['index'] ?> .color').spectrum({
            flat: false,
            showInput: true,
            showInitial: true,
            chooseText: "Sélectionner",
            cancelText: "Annuler",
            preferredFormat: "hex6",
            showSelectionPalette: true,
            localStorageKey: "spectrum.homepage",
            clickoutFiresChange: true,
            move: function(color) {
                $('#itinerary-<?php echo $_POST['index'] ?> .color').val(color.toHexString());
            },
            hide: function(color) {
                $('#itinerary-<?php echo $_POST['index'] ?> .color').val(color.toHexString());
            }
        });
        
        // Tracer
        $('#itinerary-<?php echo $_POST['index'] ?> .btn-draw').click(function(e){
            e.preventDefault();
            var type = parseInt($('#itinerary-<?php echo $_POST['index'] ?> .type').val());
            var startId = parseInt($('#itinerary-<?php echo $_POST['index'] ?> .start').val());
            var endId = parseInt($('#itinerary-<?php echo $_POST['index'] ?> .end').val());
            drawPolyline(startId, endId, type);
        });
        
        // Remplissage des marqueurs présents
        var list = getMarkers();
        var $start = $('#itinerary-<?php echo $_POST['index'] ?> .start');
        var $end = $('#itinerary-<?php echo $_POST['index'] ?> .end');
        var markerCount = markerList.length;
        for (var i = 0; i < markerCount; i++) {
            var marker = list[i];
            var $opt = $('<option>', {
                value: i,
                text: marker.getTitle()
            });
            $start.append($opt);
        }
        for (var i = 0; i < markerCount; i++) {
            var marker = list[i];
            var $opt = $('<option>', {
                value: i,
                text: marker.getTitle()
            });
            $end.append($opt);
        }
    });
</script>
